<!-- 用户管理 -->
<template>
  <div class="app-container">
    <div class="disease-body">
      <el-card shadow="never" class="disease-left">
        <div class="button-top">
          <top />
        </div>
        <el-card
          shadow="never"
          class="disease-container"
          body-class="fix-width"
          v-if="!isShow"
        >
          <div class="disease-content">
            <div
              v-for="(item, index) in settingList"
              :key="index"
              class="rapid-item"
            >
              <AssessmentItem :data="item" />
            </div>
          </div>
        </el-card>
        <div class="disease-message" v-else>
          <Message
            :obj="messageObj"
            @done="reloadHis"
            :params="messageParam"
            :knowledgeId="knowledgeId"
            @re-chat="getMessage"
          />
        </div>
        <!-- 下方对话框 -->
        <div class="disease-bottom">
          <ChatFrame v-model="done" :postDetail="message" @send="send" />
        </div>
      </el-card>
      <!-- 右侧历史记录 -->
      <div class="disease-right">
        <History
          ref="refChild"
          @update-message="handlerHistory"
          :category="category"
          :bridgeType="bridgeType"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useBridgeStore } from "@/store";
import History from "../components/history.vue";
import ChatFrame from "../components/chat-frame.vue";
import Top from "../components/top.vue";
import { useUserStore } from "@/store";
import AssessmentItem from "../components/assessment-item.vue";
import { listAssessmentSetting } from "@/api/ai/assessment/index";
import { AssessmentVO } from "@/api/ai/assessment/types";

defineOptions({
  name: "Disease",
  inheritAttrs: false,
});
const userStore = useUserStore();

const category = ref("5");
// 聊天是否完成
const done = ref(false);
const isShow = ref(false);
// 获取子组件的引用
const refChild = ref(null);
// 当前页面传给页面底部对话框的参数
const message = ref("");
// 历史记录传过来的messageId和messageTitle接收并传到message组件
const messageObj = ref({});
// 这里类似vuex
const bridgeStore = useBridgeStore();
// 导航选中的桥梁类型
const bridgeType = computed(() => bridgeStore.bridgeType);
const knowledgeId = ref<string>(userStore.user.sysUser?.id);
// 配置列表
const settingList = ref<AssessmentVO[]>([]);

// 聊天记录保存参数
const messageParam = reactive({
  bridgeType: bridgeStore.bridgeType,
  category: category,
  diseaseType: "",
});

// 接收历史记录组件传过来的问题描述并赋值到页面底部的对话框
function handlerHistory(x, y) {
  // 问答被终止
  done.value = false;
  if (x) {
    messageObj.value = {
      messageTitle: x.remark + "&",
      messageId: x.id,
    };
    // 如果x有值则打开对话框
    isShow.value = true;
  } else {
    // 否则关掉对话框
    isShow.value = false;
  }
}

function getMessage(x) {
  message.value = x;
}

// 调用历史记录列表刷新列表
function reloadHis() {
  done.value = false;
  refChild.value.getData();
}

// 点击发送按钮
function send(value: string) {
  message.value = value;
  messageObj.value = {
    messageTitle: value,
  };
  isShow.value = true;
}

// 获取页面设置问题列表
function getSetting() {
  const params = {
    bridgeType: messageParam.bridgeType,
    category: messageParam.category,
  };
  listAssessmentSetting(params).then(({ data }) => {
    settingList.value = data;
  });
}

onMounted(() => {
  getSetting();
});
</script>

<style lang="scss" scoped>
.disease-body {
  display: flex;
  $disease-height: 202px;

  .disease-left {
    position: relative;
    flex: 1;
    height: 100%;
    border: none;
    background-color: transparent;
    padding: 0 120px 0 120px;

    .home-img {
      width: 482px;
      height: 108px;
      margin: 0 auto 66px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .disease-container {
      width: 100%;
      height: calc(var(--body-height) - $disease-height);
      padding: 20px 10px 15px;
      overflow-y: auto;
    }

    .disease-content {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      justify-content: space-between;

      .rapid-item {
        width: calc(50% - 20px);
        border-radius: 12px 12px 12px 12px;
        border: 1px solid #a2c5f3;
        padding: 18px 20px;
        margin-bottom: 20px;
      }
    }

    .disease-bottom {
      width: 100%;
      height: 157px;
      margin-top: 20px;
    }

    .button-top {
      position: absolute;
      right: 0px;
    }
  }

  .disease-right {
    width: 224px;
    height: calc(var(--body-height) - 20px);
  }
}
</style>
